<template>
    <div class="exam-container">
        <el-skeleton :loading="data.isFirst" :rows="15" animated>
        <div class="head-content-search">
         <div style="display: flex">
          <!-- <div class="exam-top-addbtn">
           
          </div> -->

          <el-date-picker
            style="flex:1;margin-right:20px"
        v-model="searchDate"
        type="daterange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :default-time="data.defaultTime"
        @change="date_Change"
       
      />

          <!-- 搜索框 -->
          <div class="mySearch" style="flex: 1;">
            <el-input
      v-model="data.pages.account"
      placeholder="输入账号查询"
      class="input-with-select"
      @change="keys_change"
    >
    
      <template #append>
        <el-button :icon="Search" />
      </template>
    </el-input>
          </div>

        
        </div>
      </div>





      <div style="margin-top: 10px">
        <el-table :data="data.data.data" v-loading="data.isLoad" :border="true">
          <el-table-column label="序号" type="index" width="60px"></el-table-column>
          <el-table-column
            label="账号"
            prop="account"
            :show-overflow-tooltip="true"
            class="last_commoner"
          >
          </el-table-column>

          <el-table-column
            label="姓名"
            prop="name"
            :show-overflow-tooltip="true"
            class="last_commoner"
          >
          <template #default="scope">
            <el-tag type="primary">
                {{ scope.row.name}}
            </el-tag>
            
          </template>
          </el-table-column>

    

          <el-table-column
            label="ip"
            prop="ip"
            :show-overflow-tooltip="true"
            class="last_commoner"
          >
          </el-table-column>

          
          <el-table-column
            label="时间"
            prop="time"
            :show-overflow-tooltip="true"
            class="last_commoner"
          >
          </el-table-column>
        
        </el-table>

        <!-- 分页 -->
        <div style="margin-top: 10px; padding-bottom: 10px">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="data.pages.total"
            small
            :page-size="data.pages.limit"
            v-model:current-page="data.pages.page"
          />
        </div>
      </div>



    </el-skeleton>
        </div>
</template>

<script lang="ts" setup>
import { onMounted, ref,reactive, watchEffect } from 'vue'
import { Search } from '@element-plus/icons-vue'
import {getLoginLogs} from '../../api/logs'
import timestampToTime from '../../utils/getTime'
const searchDate:any = ref('');
let data = reactive({
    options:[],
    pages:{
        limit:10,
        page:1,
        account:'',
        total:0
    },
    begin:"",
    end:"",
    data:{
      data:[]
    },
    isLoad:true,
    isFirst:true,
    defaultTime:''
});

//输入框改变事件
const keys_change=()=>{
   
}


 //日期改变事件
 const date_Change=()=>{
    if(searchDate._rawValue!=null && searchDate._rawValue.length!=0){
    data.begin=timestampToTime.timestampToTime(new Date(searchDate._rawValue[0]).getTime());
    data.end=timestampToTime.timestampToTime(new Date(searchDate._rawValue[1]).getTime());
}
if(searchDate._rawValue==null){
    data.begin="";
    data.end=""
}  
   
 }

 //获取行为数据
 const getLoginLog=()=>{
    data.isLoad=true;
    getLoginLogs(
        {account:data.pages.account,
         page:data.pages.page,
        limit:data.pages.limit,
        begin:data.begin,
        end:data.end  
    }
        ).then((res:any)=>{
        if(res.result===0){
            console.log(res.data);
            
            data.data=res.data;
            data.pages.total=res.data.total;   
           data.isLoad=false;
           data.isFirst=false;
            
        }
    });
 } 



 onMounted(() => {
    getLoginLog();
})

watchEffect(()=>{
    getLoginLog();
})

</script>